<template>
  <div class="app-music">
    <MSearch></MSearch>
    <!-- 歌曲推荐 -->
    <MTitle :titleLists="titleList[0]"></MTitle>
    <MSongList
      v-for="item in recomList"
      :key="item.id"
      :recomLists="item"
      @click.native="jumpMusicDetails(item)"
    ></MSongList>
    <!-- 热门歌单 -->
    <MTitle :titleLists="titleList[1]"></MTitle>
    <div class="box">
      <MSheetList
        v-for="item in sheetList"
        :key="item.id"
        :sheetLists="item"
      ></MSheetList>
    </div>
    <!-- 推荐小程序 -->
    <MTitle :titleLists="titleList[2]"></MTitle>
    <div class="box">
      <MApplet
        v-for="(item, index) in appletList.length"
        :key="appletList[index].id"
        :appletLists="appletList[index]"
      ></MApplet>
    </div>
    <!-- 官方歌单 -->
    <MTitle :titleLists="titleList[3]"></MTitle>
    <div class="box">
      <MSheetList
        v-for="item in sheetList2"
        :key="item.id"
        :sheetLists="item"
      ></MSheetList>
    </div>
    <!-- 巅峰榜 -->
    <MTitle :titleLists="titleList[4]"></MTitle>
    <!-- for循环传递 -->
    <MRanking
      v-for="item in ranList"
      :key="item.id"
      :ranLists="item"
    ></MRanking>

    <!-- 全局音乐控件 -->
    <MPlayer v-if="flag" @playPopup="playPopup"></MPlayer>
    <!-- 音乐列表弹窗 -->
    <MPopup v-if="MPopupflag" @offPopup="offPopup"></MPopup>
  </div>
</template>

<script>
import MSearch from "./M-Search.vue";
import MTitle from "./M-Title.vue";
import MSongList from "./M-SongList.vue";
import MSheetList from "./M-SheetList.vue";
import MApplet from "./MApplet.vue";
import MRanking from "./M-Ranking.vue";
import MPlayer from "./M-Player.vue";
import MPopup from "./M-Popup.vue";
import { recMusic, hotSheet } from "@/request/api/Music.js";

export default {
  components: {
    MSearch,
    MTitle,
    MSongList,
    MSheetList,
    MApplet,
    MRanking,
    MPlayer,
    MPopup
  },
  data() {
    return {
      titleList: [
        {
          title: "歌曲推荐",
          judge: true,
        },
        {
          title: "热门歌单",
          judge: true,
        },
        {
          title: "推荐小程序",
          judge: false,
        },
        {
          title: "官方歌单",
          judge: true,
        },
        {
          title: "巅峰榜",
          judge: false,
        },
      ],
      appletList: [
        {
          id: 1,
          imgsrc: "/img/01.webp",
          info: "听歌识曲",
        },
        {
          id: 2,
          imgsrc: "/img/02.webp",
          info: "歌词海报",
        },
        {
          id: 3,
          imgsrc: "/img/03.webp",
          info: "睡眠电台",
        },
      ],
      recomList: [],
      sheetList: [],
      sheetList2: [],
      ranList: [],
      flag:false,
      MPopupflag:false
    };
  },
  created() {
    this.getRecMusic();
    this.getsheetList();
    this.getsheetList2();
    this.getranList();
    // this.flag = this.$store.state.playerflag
    this.getVuexData()
    // console.log(this.flag);
    // console.log(this.$store.state.playerflag);
  },
  methods: {
    getRecMusic() {
      recMusic("/personalized/newsong", { limit: 3 }).then((res) => {
        if (res.code == 200) {
          this.recomList = res.result;
          // console.log(this.recomList);
        }
      });
    },
    getsheetList() {
      hotSheet("/personalized", { limit: 9 }).then((res) => {
        if (res.code == 200) {
          this.sheetList = res.result;
        }
      });
    },
    getsheetList2() {
      hotSheet("/personalized", { limit: 9 }).then((res) => {
        if (res.code == 200) {
          this.sheetList2 = res.result;
        }
      });
    },
    getranList() {
      hotSheet("/toplist/detail", {}).then((res) => {
        if (res.code == 200) {
          for (let i = 0; i < res.list.length; i++) {
            if (i === 0 || i === 1 || i === 3) {
              this.ranList.push(res.list[i]);
            }
          }
        }
      });
    },
    // 点击跳转到音乐详情页面
    jumpMusicDetails(item){
      this.$router.push({path:'/musicdetails',query:{item}})
    },
    getVuexData(){
      if (!this.$store.state.playerflag) {
      }else{
        console.log(this.$store.state.playerflag);
        this.flag = true;
      }
    },
    playPopup(val){
      this.MPopupflag = val
    },
    offPopup(val){
      this.MPopupflag = val
    }

  },
};
</script>

<style scoped lang='scss'>
.app-music {
  padding-left: 66.7px;
  .box {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    overflow: auto;
  }
}
</style>